import React, { useEffect, useState } from 'react'
import { getDraft } from '../../api/draft';
import { Pagination } from 'antd';
import PostDraft from './PostDraft';

// 封装请求函数
// 组件内容：
    // 引入请求函数
    // 声明状态、
    // useEffect 发请求(参数)、
    // 状态绑定(循环渲染等)、
    // 交互操作(封装事件处理函数)

const Upload = () => {
    const [draft,setDraft] = useState({});
    // const [page,setPage] = useState(1);
    // const [size,setSize] = useState(10);
    const [params,setParams] = useState({page: 1,size: 10})
    useEffect(()=>{
        getDraft(params)
            .then(res=>{
                console.log(res);
                setDraft(res.data)
            })
    },[params])
    // useEffect(()=>{
    //     getDraft({page,size})
    //         .then(res=>{
    //             console.log(res);
    //             setDraft(res.data)
    //         })
    // },[page,size])
    const pageChange = (page,size)=>{
        // setPage(page)
        // setSize(size)
        setParams({page,size})
    }
    return (
        <div>
            <PostDraft draft={draft} setDraft={setDraft} />
            <ul>
                {
                    draft.content?.map(item=>{
                        return <li key={item.id}>
                            <div>
                                {item.draftTitle} --
                                {item.draftContext}
                            </div>
                            <div>
                                {item.user.username} ---
                                {
                                    new Date(item.draftDate).toLocaleString()
                                }
                            </div>
                        </li>
                    })
                }
            </ul>
            <Pagination onChange={pageChange} current={params.page} total={draft.totalElements} />
        </div>
    )
}

export default Upload